//首页轮播图

let slide=document.querySelector('.slide');
let page=document.querySelector('.pagination');
// let ul=document.querySelector('ul');
let ul=slide.querySelector('ul');
let lis=slide.querySelectorAll('li');
let spans=page.querySelectorAll('span');
let timer=null; //定时器
let step=0;  //图片滑动初始索引
// 获取屏幕宽度
let deviceWidth=document.body.clientWidth;



// 自动播放图片
function antoMove(){
    step++;
    if(step==5){  //一共4+1=5张图 索引号为5时图片是空的 此时迅速切换到第一张
        ul.style.transitionDuration='0ms';
        ul.style.left=0;
        step=1;
        ul.offsetLeft;//当设置样式的时候 js的渲染机制是先储存再统一执行  ul.offsetLeft是获取 相当于一个断点 因为要得到offsetLeft值 就必须先执行 ul.style.left=0代码
    }
    ul.style.transitionDuration='1000ms';//让过渡效果持续1秒
    ul.style.left=-step*deviceWidth+'px';

    //控制spans下的active类
    clearClass(spans);
    let index=step==4?0:step;
    spans[index].className='active';

}
 timer=setInterval(antoMove, 2000);

//用户点击切换图片
function paginationMove(){
    spans.forEach((item,index)=>{
        item.onclick=function(){
            // clearInterval(timer);
            clearClass(spans);  //先清空当前类
            step=index;
            ul.style.left=-step*deviceWidth+'px';
            this.className='active';  //当前目标添加active类
        }
    })
}

paginationMove();

 //鼠标移入停止定时器
 slide.onmouseenter=function(){
    clearInterval(timer);
 }
  //鼠标离开时开启定时器  注意不能用mouseout 我也不晓得为什么
 slide.onmouseleave=function(){
    timer=setInterval(antoMove, 2000);
}
//  清空所有数组元素的类
function clearClass(data){
    data.forEach(item => {
        item.className='';
    })
}


//首页轮播图结束



// 页面第一次加载或刷新时数值动态增加

window.onload=function(){
    // 覆盖地区 数值变化
    let serv_num=document.querySelector('#server_num'); 

    let serv_h=document.querySelector('#server_time .h');
    let serv_week=document.querySelector('#server_time .week');
   


//    serv_num 服务数量定时器
    let i=0;
    let h=0;
    let week=0;
    var timer=setInterval(function (){     
        if(serv_num.innerHTML=='1590+'){
            clearInterval(timer);
        } 
            serv_num.innerHTML=i+'+';
            i=i+10;
    },15);

    // serv_time 服务时间定时器

    var timer1=setInterval(function (){    
         if(serv_h.innerHTML==23){
             clearInterval(timer1);
         }
         serv_h.innerHTML=h;
         h++;
        
    },70);
    var timer2=setInterval(function (){    
        if(serv_week.innerHTML==6){
            clearInterval(timer2);
        }
        serv_week.innerHTML=week;
        week++;
       
   },240);
}











